<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/home' }"><i class="el-icon-menu"></i> 系统管理</el-breadcrumb-item>
                <el-breadcrumb-item>登录日志</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="handle-box">
            <el-button type="primary" icon="delete" class="handle-del mr10" @click="deleteAll">清空日志</el-button>
        </div>
        <el-table :data="loginLogList" border style="width: 100%" ref="multipleTable"
                  @selection-change="handleSelectionChange">
            <el-table-column prop="logname" label="日志名称" sortable>
            </el-table-column>
            <el-table-column prop="userid" label="用户名称">
            </el-table-column>
            <el-table-column prop="createtime" label="创建时间" :formatter="formatDateCreatetime">
            </el-table-column>
            <el-table-column prop="succeed" label="结果">
            </el-table-column>
            <el-table-column prop="message" label="具体内容">
            </el-table-column>
            <el-table-column prop="ip" label="IP">
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination
                @current-change="getData"
                :page-size="size"
                layout="total, prev, pager, next"
                :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import {formatDate} from '../../../static/js/date.js';
    export default {
        data() {
            return {
                loginLogList: [],
                total: 0,
                currentPage: 1,
                size: 10
            }
        },
        created() {
            this.getData();
        },
        methods: {
            //获取user数据
            getData(data) {
                let self = this;
                var Vstart = 0;
                var Vsize = self.size;
                if (data != undefined && !isNaN(data)) {
                    Vstart = data - 1;
                }
                self.$axios.post("/api/loginLog/get", {pageNumber: Vstart, pageSize: self.size}).then((res) => {
                    self.loginLogList = res.data.data.content;
                    self.total = res.data.data.totalElements;
                })
            },
            //清空日志
            deleteAll() {
                let self = this;
                self.$axios.delete("/api/loginLog/delete")
                    .then((response) => {
                        console.log(response);
                        self.$message({
                            message: "删除成功",
                            type: 'warning'
                        });
                        self.getData();
                    })
                    .catch(function (error) {
                        if (error.response) {
                            self.$message({
                                message: error.response.data.msg,
                                type: 'error'
                            });
                        }
                    })
            },
            formatDateCreatetime(data, row) {
                if (data.createtime != null) {
                    return formatDate(new Date(data.createtime), 'yyyy-MM-dd hh:mm');
                }
            }
        }
    }
</script>

<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }
</style>
